iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0

有系統的交付 UI 設計

在設計師們 UI 時,我們能夠隨時、直接的在 Figma 上看到,UI 的各種 width、padding 數值。雖然自動產生的方便歸方便,但是一些開發細節往往不在那些基本肉眼能看到的數字。那些小細節?之後再說。相信工程師們想要知道的是 「如何開始這一頁的開發」「如何切版佈局」

懂得標記重點 SPEC 的設計師能更好在理解前端切版後,更有系統系的設計 UI。一個好的 UI SPEC 文件也可以讓工程師們少走彎路!

UI SPEC 是什麼

UI SPEC 全名 UI specification,通常是一種補充文件或是說明,搭配 UI Mockup,用於標記設計稿的具體的尺寸、顏色代碼、字體樣式。目標是讓開發了解設計如何透過 Code 被實現

當然,若公司有固定的設計 pattern、元件庫(UI Libaray),擁有一致的規範能讓開發和設計師雙方都輕鬆很多!
UI SPEC
(圖片來源:konrad. https://www.konrad.com/research/ui-design-example

我們會如何提供 UI SPEC

我們會在 Figma 的檔案中,將 UI SPEC 直接撰寫在 UI Mockup 的下方,
方便前端開發的同時上下比對資訊。
UI SPEC

專案中的 UI SPEC 會提供哪些資訊

這個專案提供的 UI SPEC 主要會聚焦在 UI 的設計上。而平台的邏輯、條件和檢核因為過於複雜,為了更有架構性的整理規格,我們通常會另外獨立產出更條列式的文件(Day23 時會分享!)。

會註記的內容分為以下三個部分:

  1. 單一頁面大方向的切版設計(多個模組間如何組合)
  2. 拉出模組詳細描述: 設計細節(資料排序方式?項目狀態?開發重點?)、互動跳轉(按鈕互動?操作互動?)
  3. RWD 的作法:各種尺寸的 UI(如何斷行?擠壓時的極限值?)

UI SPEC

實際撰寫方式沒有一定,撰寫在 word、notion、axure、Figma 都沒有一定,沒有一個最好的方法,只有最適合的!建議觀察開發流程後,與自己的團隊討論訂下規則~

設計師們的進階小技巧

透過 Day12 分享的內容,將 UI 用模組化的方式建立成 Component,在下方配圖註解設計細節時就可以更快速、方便的維護檔案哦!


上一篇
[Day12-開發前期] 原子設計?功能設計模組化,元件庫 Level up!
下一篇
[Day14-開發前期] User Flow、User Journey,還是 Logic Flow 🤔?流程圖百百種,哪種才適合?
系列文
【前端工程師&UI 的 30 天約會】戰勝猴子!:Figma 交付實戰篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言